跳到主要内容
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

公共展示模板管理

公共展示模板是您自定义可视化的基础。它们定义了将应用于您安装的布局、结构和视觉元素。此全面指南涵盖从基本模板创建到高级设计技术的所有内容。

📋 概述​

什么是公共展示模板？​

模板作为可重用的蓝图，可以：

  • 📐 定义公共展示的视觉布局
  • 🧩 组织内容块及其定位
  • 🎨 在多个安装之间建立设计一致性
  • ⚙️ 实现标准可视化的快速部署
  • 🔄 支持所有链接配置的轻松更新

主要优点​

优点描述
🚀 效率一次制作，在多个安装中使用
🎯 一致性维护统一的设计标准
🔧 灵活性易于修改，无需从头开始创建

🚀 入门​

模板工作流程​

  1. 📐 设计布局 - 规划您的视觉结构
  2. 🎨 创建模板 - 使用模板编辑器构建
  3. 💾 保存模板 - 存储以便在多个安装中重用

先决条件​

在创建模板之前，请确保您拥有：

  • ✅ SmartgridX帐户，并具备适当权限
  • ✅ 明确的设计目标，以便进行可视化
  • ✅ 内容需求（图像、数据点、布局）

🎛️ 模板管理界面​

访问模板管理器​

infographicimage

导航步骤：

  1. 登录到您的SmartgridX帐户
  2. 在主侧边栏中导航到**“公共展示”**
  3. 点击概述页面上的**“公共展示模板”**按钮

这将打开模板管理界面，您可以在此查看、创建、编辑和删除模板。

模板概览表​

infographicimage

可用操作：

  • ➕ 添加 - 点击绿色按钮以开始创建模板
  • ✏️ 编辑 - 修改现有模板设计
  • 🗑️ 删除 - 删除未使用的模板

🎨 模板创建过程​

开始新模板​

点击**“创建新模板”**按钮以打开模板编辑器界面。

模板头部配置​

infographicimage

标题设置​

模板标题：

  • **目的：**在列表和配置中识别模板
  • **最佳实践：**使用描述性、项目特定的名称
  • 示例：“Factory-KPI-Dashboard”，“Energy-Monitoring-Layout”，“Multi-Zone-Display”

边距配置​

边距设置定义展示边框的安全区域：

边距滑块（0-100px）：

  • 📐 范围： 从展示边缘0到100像素
  • 🎯 目的： 创建安全间距以防止内容被截断
  • 📱 应用： 确保在各种展示类型上的可见性
  • ⚙️ 推荐： 标准展示使用10-20px，边框到边框的屏幕使用30-50px

视觉影响：

  • 0px边距 - 内容延伸至展示边缘
  • 50px边距 - 内容距离所有边缘50像素开始
  • 100px边距 - 最大安全区域，有大量边距

保存功能​

💾 保存按钮（右上角）允许您保存当前模板。

🧩 块布局系统​

理解网格系统​

infographicimage

网格基础​

模板编辑器使用100×100基于百分比的网格系统：

网格属性：

  • 📐 尺寸： 宽100单位 × 高100单位
  • 📊 单位： 百分比值（1单位 = 总尺寸的1%）
  • 🎯 精确性： 允许准确定位和尺寸设置
  • 📱 响应式： 自动适应不同屏幕尺寸

块布局示例​

配置： 宽100 × 高100
结果： 全屏覆盖
用例： 单个大型可视化，全屏图像

┌─────────────────────────────────┐
│                                 │
│         FULL BLOCK              │
│                                 │
│                                 │
└─────────────────────────────────┘

块操作​

添加块​

方法： 点击**“添加块”**按钮（编辑器的右上角）
结果： 新块以默认尺寸出现
下一步： 根据需要定位和调整大小

定位块​

拖放：

  • 🖱️ 点击并按住任何块以移动它
  • 📍 实时预览显示拖动时的位置
  • 🧲 网格吸附帮助精确对齐
  • 👁️ 视觉指南出现以辅助对齐

调整块大小​

调整大小手柄：

  • 📐 右下角在选中块时显示调整大小手柄
  • 🔧 拖动以同时调整宽度和高度
  • 📊 实时值显示当前尺寸

精确控制​

infographicimage

右侧定位面板​

当选择一个块时，右侧面板提供：

定位控制：

  • 📍 X位置 - 从左边缘的水平偏移（0-100）
  • 📍 Y位置 - 从上边缘的垂直偏移（0-100）
  • 🎨 Z索引 - 叠加块的层排序
  • 📏 宽度 - 块宽度百分比（1-100）
  • 📏 高度 - 块高度百分比（1-100）

⚙️ 块配置​

块类型和属性​

infographicimage

访问块配置​

方法：

  1. 在编辑器画布中选择一个块
  2. 配置面板将在屏幕底部出现
  3. 块类型下拉菜单是主要的配置选项

注意：并非所有块目前都是可配置的。随着开发的继续，这一情况将会改变。未来的更新将添加更多的块类型。

可用块类型​

目的： 显示静态图像、徽标、背景、GIF 配置选项：

  • 📁 图像来源 - 将用作此块的默认上传或 URL。如果您希望在配置中强制选择一个图像，可以将该字段留空。

使用案例：

  • 公司徽标和品牌
  • 背景图像
  • 设备照片
  • GIF

模板示例​

infographicimage

该示例展示了一个 结构良好的模板，具有：

  • 📊 清晰的块组织，带有描述性标签
  • 📐 适当的间距和对齐
  • 🎯 功能性块类型，满足不同内容需求

此示例中的块命名：

  • 每个块显示其 预期目的
  • 清晰的标签 有助于配置
  • 逻辑组织 支持维护

📚 相关文档​

下一步​

创建模板后：

  1. ⚙️ 配置安装 - 将模板应用于特定安装
  2. 🎛️ 链接控制器 - 连接显示硬件
  3. 🚀 入门指南 - 完整工作流程概述

高级主题​

  • 🎨 高级设计技巧
  • 📊 自定义数据集成
  • 🔄 自动模板更新
  • 👥 多用户模板协作

💡 最佳实践总结​

模板设计​

✅ 设计原则：

  • 🎯 保持简单 - 专注于基本信息
  • 📱 响应式设计 - 在不同屏幕尺寸上进行测试
  • 🎨 保持一致性 - 使用标准化的颜色和布局

模板管理​

✅ 组织提示：

  • 📝 使用描述性名称 - 让模板易于查找
  • 🔄 定期维护 - 删除未使用的模板
  • 👥 分享标准 - 确保团队的一致性

🎨 准备设计了吗？ 在您创建和配置模板后，您准备在您的 SmartgridX 安装中部署令人惊艳的可视化效果！